ホバーしたときにだけ出現する要素の CSS を DevTools で調べる方法がわかりますか？（2 問あります）

ホバーをしたときに現れる要素、ここでは例として Material Design でいう Tooltips のようなものを想定します。これらの要素に当てられている CSS を Chrome DevTools を使って、コードに直接変更を加えることなく調べる方法を考えていきます。

2 つの問題を以下のページに用意してみたので、是非問いてみてください。

• https://how-to-debug-hovered-element.pages.dev/

出題のサイトのコードも以下に公開しています。

• https://github.com/hbsnow-sandbox/how-to-debug-hovered-element

問題 1 の解説

問題 1 では Tooltip の表示に CSS の :hover 擬似クラスを使用しています。このような場合には特に苦労することはありません。

Devtool の Elements から対象の要素を選択し、右クリックすると出現するポップアップのメニューから Force state の中にある :hover を選択してみましょう。

すると要素の左側に黄色い丸のマークが表示されているはずです。これで :hover の状態が維持されるようになりました。

これで、hover 時に出現する ::before 擬似クラスを選択して、どういった CSS が当てられているのか調べることができます。

この Force state の設定は Elements の Styles の中にある :hov を選択することで、簡単に切り替えることもできます。

パッと切り替えられて便利なので、個人的にはこちらでの切り替えがおすすめです。

問題 2 の解説

問題 2 では Tooltip の表示に onMouseEnter / onMouseLeave イベントを使用し、onMouseEnter 時に表示させ、onMouseLeave で非表示にしています。

この方法で Tooltip が作成されている場合、:hover を有効にする問題 1 の解答で使った方法では先述のイベントがトリガされるわけではないので Tooltip を表示させることはできません。

適切なタイミング、ここではサブツリーの変更時にブレークポイントを設定していきます。

DevTools の Elements から対象の要素を選択し、右クリックすると出現するメニューから Break on の中にある subtree modifications を選択してみましょう。ここでの選択肢は以下のページで解説されています。

• Pause your code with breakpoints

例えば Mateial UI の Tooltip ではサブツリーが変更されず、属性が変更されるため属性の変更時にブレークポイントを設定する必要があります。そのような場合には attribute modifications を選択してください。

いずれかを選択すると、要素の左側に青い丸のマークが表示されているはずです。これでブレークポイントが設定されました。

ホバーすると設定されたブレークポイントのおかげでステップ実行ができるようになりました。Tooltip が表示されるまで実行しましょう。

これで hover 時に追加されている要素を選択できるようになりました。

まとめ

問題 2 についてはもしかすると別解とかあるのかな、と気になっています（この記事を書いた動機でもあります）。もしご存知の方がいれば教えてもらえると嬉しいです。

追記

• mouseover 中に表示される DOM のデバッグ | blog.jxck.io

上記のサイトで非常に便利な方法がわかりやすく紹介されていたのでリンクさせていただきます。F8 は知りませんでした、便利ですね！